<template>
    <div class="content" id="content" ref="content"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name:"Pie",
    props:{
        dataList:{
            type:Array|Object,
            require:false
        },
        title:{
            type:String,
            require:false,
            default:""
        }
    },
    data(){
        return{
            echartsInstance:null
        }
    },
    watch:{
        dataList:{
            handler(newValue,oldValue){
                const title = this.title;
                if(title === "线索有效率占比"){
                    this.dealData1(newValue);
                }
                if(title === '客户跟进方式统计'){
                    this.dealData2(newValue);
                }
                if(title === '区域客户占比统计'){
                    this.dealData3(newValue);
                }
            },
            deep:true,
            //immediate:true
        }
    },
    mounted(){
        this.initEcharts();
        const _this = this;
        window.addEventListener('resize',function(){
            _this.echartsInstance.resize();
        })
    },
    methods:{
        initEcharts(){
            const total = 300;
            const dom = this.$refs.content;
            this.echartsInstance = echarts.init(dom);
            const option = {
                title: {
                left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    bottom: 'bottom'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 0, name: '' },
                            { value: 0, name: '' },
                            { value: 0, name: '' }
                        ],
                        emphasis: {
                            itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            show: true, // 显示标签
                            formatter: function (params) {
                                // 计算百分比
                                var percent = (params.value / total * 100).toFixed(2);
                                return params.name + '\n' + params.value + ' (' + percent + '%)';
                            }
                        },
                        color: [
                            '#457de5',
                            '#9192a8',
                            '#e8bc6b',
                            '#bac0c5',
                            '#77da90'
                        ],
                    }
                ]
            };
            option && this.echartsInstance.setOption(option);
        },
        dealData1(parameter){
            const total = parameter.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            const option = {
                title: {
                left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    bottom: 'bottom'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: parameter,
                        emphasis: {
                            itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            show: true, // 显示标签
                            formatter: function (params) {
                                // 计算百分比

                                return params.name + '\n' + params.value + ' (' + params.percent + '%)';
                            }
                        }
                    }
                ]
            };
            this.echartsInstance.setOption(option);
        },
        dealData2(parameter){
            const option = {
                title: {
                left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    bottom: 'bottom'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: parameter,
                        emphasis: {
                            itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            show: true, // 显示标签
                            formatter: function (params) {
                                return params.name + '\n' + params.value + ' (' + params.percent + '%)';
                            }
                        }
                    }
                ]
            };
            this.echartsInstance.setOption(option);
        },
        dealData3(parameter){
            const list = ['北京', '深圳', '广州','其它'];
            const tmp = list.map(v => {
                const a = parameter.find(k => k.region.includes(v));
                return {
                    name:v,
                    value: a ? a.count : 0
                }
            })
            const option = {
                title: {
                left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    bottom: 'bottom'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: tmp,
                        emphasis: {
                            itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {
                            show: true, // 显示标签
                            formatter: function (params) {
                                return params.name + '\n' + params.value + ' (' + params.percent + '%)';
                            }
                        }
                    }
                ]
            };
            this.echartsInstance.setOption(option);
        }
    }
}
</script>

<style lang='scss' scoped>
.content{
    width: 100%;
    height: 100%;
}
</style>